<!--
 * @Descripttion: 设备简介
 * @LastEditors: xzh
 * @LastEditTime: 2023-11-15 20:30:56
-->
<template>
  <el-card class="el-card-bottom-top">
    <div class="intro-container">
      <div class="intro-content">
        <div class="content-title">
          <SvgIcon name="equip" :size="2.5" />
          <span>{{ formData.name }}</span>
        </div>
        <el-form
          ref="formRef"
          :model="formData"
          label-width="5rem"
          label-position="left"
          size="large"
        >
          <el-col :span="12">
            <el-form-item :label="$t('table.createUser') + ':'">
              <span>{{ formData.createUser }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('table.updateUser') + ':'">
              <span>{{ formData.updateUser }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('table.createTime') + ':'">
              <span>{{
                dayjs(formData.createTime).format("YYYY-MM-DD HH:mm:ss")
              }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('table.updateTime') + ':'">
              <span>{{
                dayjs(formData.updateTime).format("YYYY-MM-DD HH:mm:ss")
              }}</span>
            </el-form-item>
          </el-col>
        </el-form>
      </div>
      <div class="intro-operate">
        <div class="operate-btnArr">
          <el-button type="success" plain @click="initEquipQrCode">{{
            $t("table.btnArr.qrCode")
          }}</el-button>
          <!-- <el-dropdown>
            <el-button type="success" plain :icon="More" />
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>{{
                  $t("page.equipManageArr.equipArchivesArr.btnArr.faultRepair")
                }}</el-dropdown-item>
                <el-dropdown-item>{{
                  $t("page.equipRepair")
                }}</el-dropdown-item>
                <el-dropdown-item>{{
                  $t("page.equipUpkeep")
                }}</el-dropdown-item>
                <el-dropdown-item>{{
                  $t("page.equipManageArr.equipArchivesArr.btnArr.deleteEquip")
                }}</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown> -->
        </div>
        <div class="operate-state"></div>
      </div>
    </div>
    <!-- 设备二维码 -->
    <EquipArchivesQrCode ref="equipArchivesQrCodeRef" />
  </el-card>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import { dayjs } from "element-plus";
import { More } from "@element-plus/icons-vue";
import SvgIcon from "@/assets/icons/index.vue";
import EquipArchivesQrCode from "../../equipArchives/equipArchives-qrcode/index.vue";
import { object_Inf } from "@/utils/typings/index.type";

let props = defineProps({
  formData: {
    type: Object,
    default: {},
  },
});
/**
 * @Author: xzh
 * @Descripttion: 设备二维码实例
 * @Param:
 */
let equipArchivesQrCodeRef = ref<any>(null);
/**
 * @Author: xzh
 * @Descripttion: 加载设备二维码
 * @Param:
 */
let initEquipQrCode = () => {
  let { id }: object_Inf = props.formData;
  //打开设备二维码弹框
  equipArchivesQrCodeRef.value.init(id);
};
</script>
<style lang="scss" scoped>
.intro-container {
  display: flex;
  justify-content: space-between;
  .intro-content {
    display: flex;
    flex-direction: column;
    flex: 50% 0 0;
    gap: 1.5rem;
    padding: 0 1rem;
    .content-title {
      display: flex;
      gap: 0.5rem;
      span {
        font-size: 1.6rem;
        font-weight: 700;
        line-height: 2rem;
      }
    }
    > .el-form {
      :deep(.el-form-item--large) {
        margin: 0;
      }
    }
  }
  .intro-operate {
    flex: 20% 0 0;
    display: flex;
    flex-direction: column;
    .operate-btnArr {
      display: flex;
      gap: 1rem;
      justify-content: flex-end;
    }
  }
}
</style>
